<template>
    <div>
      <shopHeader/>
      <section>
        <div class="tab">
          <div class="tab-item" v-for="(menus , index) in menu" :key="index" @click="addClass = index">
            <router-link :class="{'active':addClass === index}" class="btn" :to="{path: menus.route,query: {
            index: $route.query.index,                          //每个商家的ID号
            name: $route.query.name,                            //商家名称
            image_path: $route.query.image_path,                //商家头像
            promotion_info: $route.query.promotion_info,        //商家说明
            rating: $route.query.rating,                        //商家评分
            recent_order_num: $route.query.recent_order_num,    //商家月销量
            float_delivery_fee: $route.query.float_delivery_fee,//配送费
            float_minimum_order_amount: $route.query.float_minimum_order_amount//多少金额起送
          }}"> {{menus.text}}</router-link>
          </div>
        </div>
      </section>
      <section class="banner animated tada" v-if="banner.show?banner.show:false">
        <div class="shopsbanner">
          <div class="swiper-container">
            <div class="swiper-wrapper">
              <div class="swiper-slide" v-for="(img,index) in banner.images" :key="index">
                <img :src="img" style="width: 100%;height: 100%;opacity: 1" />
              </div>
            </div>
          </div>
          <div class="information">
            <h2 class="text">{{banner.name}}</h2>
            <p class="text">优惠价：¥{{banner.price}}</p>
            <p class="text">销量：{{banner.sellCount}}&nbsp;&nbsp;好评率{{banner.rating}}%</p>
          </div>
        </div>
        <span class="iconfont icon-guanbi" @click="hidden"></span>
      </section>
      <router-view/>
    </div>
</template>

<script>
  import shopHeader from '../../../components/commodity/shopHeader.vue'; //商家头部组件
  import Vue from 'vue'
  import { Spinner } from 'mint-ui';
  Vue.component(Spinner.name, Spinner);
  export default {
    data(){
      return {
        menu: [
          {route: '/commodity/meun',text: '点餐'},
          {route: '/commodity/evaluate',text: '评价'},
          {route: '/commodity/business',text: '商家'},
        ],
        addClass: 0,
        banner: {
          show: false
        }
      }
    },
    components:{
      shopHeader
    },
    methods:{
      //关闭banner
      hidden (){
        this.banner.show = false;
        this.resetSetItem('gavin', this.banner);
      },
    },
    //监视sessionStorage缓存
    created(){
      window.addEventListener('setItem', ()=> {
        this.banner = JSON.parse(sessionStorage.getItem('gavin'));
        this.banner.loding = false;
        setTimeout(() => {
            new Swiper('.swiper-container', {
              loop: true, // 循环模式选项
              // 如果需要分页器
              pagination: {
                el: '.swiper-pagination',
              },
              effect: 'coverflow',
            });
        },2000)
      })
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
  @import "../../../common/stylus/minxins.styl"
  .tab
    height 2rem
    line-height 1.5rem
    background #fff
    bottom-border-1px(rgba(7, 17, 27, 0.1))
    .tab-item
      float left
      width: 33.33333%
      text-align center
      font-size .52rem
      color rgb(77, 85, 93)
      .btn
        display block
        position relative
        border-top 0.2rem solid #FFF
        &.router-link-active
          color #02a774
          &::after
            content ''
            position absolute
            left 50%
            bottom 0.03rem
            width 1.3rem
            height 2px
            transform translateX(-50%)
            background #02a774
  .active
    border-top .2rem solid red !important
    color red
  .banner
    position: absolute;
    top 50%
    left 50%
    z-index 999
    width 12rem
    height 14rem
    margin -7rem 0 0 -6rem
    text-align center
    background rgba(0,0,0,0.4)
    .shopsbanner
      width 100%
      height 100%
      .swiper-container
        width 100%
        height 200px
        .swiper-wrapper
          width 100%
          height 100%
          .swiper-slide
            background red
  .icon-guanbi
    font-size 1.313rem
    color red
    font-weight 100
  .text
    color #fff
    padding-top .525rem
</style>
